<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>入职申请</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<!--  <link rel="stylesheet" href="../layui/css/layui.css">-->
    <script type="text/javascript" charset="utf-8" src="../layui/xm-select1.js"></script>
    <link rel="stylesheet" href="../layui-v2.9.8/layui/css/layui.css">
    <script src="../layui-v2.9.8/layui/layui.js"></script>
<!--  <script src="../layui/layui.js"></script>-->
    <style type="text/css">
        @media screen and (max-width: 767px) {
            .layui-form{
                display: flex!important;
                flex-direction: column;
            }
            .layui-field-title {
                margin: 5px 0 !important;
            }
            .layui-field-title legend {
                font-size: 0.8rem !important;
            }
            .layui-form .layui-col-xs1 div{
                font-size: 0.9rem!important;
            }
            .layui-form .layui-col-xs1,.layui-form .layui-col-xs12 p{
                width: 20% !important;
                min-width: 70px;
                text-align: left !important;
                margin: 10px 0 0 5px;
                height: 19px !important;
                line-height: 19px !important;
            }
            .layui-form .layui-col-xs5,#copyPersonSelect{
                width: 80% !important;
                font-size: 0.7rem;
            }
            .layui-col-xs6 div button{
                height: 25px!important;
                line-height: 25px!important;
                padding: 0 10px!important;
                font-size: 0.8rem!important;
            }
            .layui-col-xs6 div{
                margin-left: 30px!important;
                margin-top: 0!important;
            }
        }
    </style>
    <script>
        function deleteprocess() {
            // 创建表单数据对象
            var formData = new FormData();
            formData.append("id", layui.$("#formid").val());
            // 使用sendBeacon方法发送异步请求
            navigator.sendBeacon("/process/delete", formData);
        }
        layui.use(function(){
            var  $=layui.$;
            var form = layui.form;
            var xm
            var keys=[]
            window.addEventListener("beforeunload",deleteprocess);
            $.ajax({
                    url: '/position/queryposition1',
                    dataType: 'json',
                    type: 'post',
                    success: function (data) {
                        $.each(data.data, function (index, item) {
                            $('#position').append(new Option(item.positionName, item.positionName));// 下拉菜单里添加元素
                        });
                        layui.form.render("select");
                    }, error: function () {
                        alert("仓库列表加载失败")
                    }
                }
            )
            $.ajax({
                url: "/user/queryforselect",
                type: "post",
                async: true,
                success: function (data) {
                    if(data.data){
                        for (var i = 0; i < data.data.length; i++) {
                            var temp = {
                                "name": data.data[i].realName,
                                "value": data.data[i].username  //value为唯一标识，此处为id
                            }
                            keys.push(temp)
                        }
                        xm=xmSelect.render({
                            el: '#copyPersonSelect',
                            direction: 'up',
                            filterable: true,
                            data: keys
                        })
                    }
                },
            });
            $.ajax({
                    url: '/department/querydepartment1',
                    dataType: 'json',
                    type: 'post',
                    success: function (data) {
                        $.each(data.data, function (index, item) {
                            $('#department').append(new Option(item.departmentName, item.departmentName));// 下拉菜单里添加元素
                        });
                        layui.form.render("select");
                    }, error: function () {
                        alert("仓库列表加载失败")
                    }
                }
            )
            var laydate = layui.laydate;
            // 渲染
            laydate.render({
                elem: '#estimatedDate',
                format: 'yyyy-MM-dd', // 设定日期显示格式
                type: 'date' // 只显示日期，不显示时间
            });
            //自定义验证规则
            form.verify({
                fileExt: function(value, item){ // value为文件路径，item为当前输入框的DOM对象
                    var allowedExtensions = ['jpg', 'png','jpeg']; // 允许的文件后缀
                    if(value){
                        var extension = value.split('.').pop().toLowerCase(); // 获取文件后缀并转为小写
                        if(allowedExtensions.indexOf(extension) === -1){
                            return '不支持该文件类型，请选择 ' + allowedExtensions.join(', ') + ' 格式的文件';
                        }
                    }
                }

            });
            //新增自定义规则
            form.on('submit(submitForm)', function(data){
                var copyPersons = xm.getValue();
                if (copyPersons.length < 1){
                    layer.msg("请输入抄送人");
                    return false;
                }
                $(this).append("<input type='hidden' name='copyPersons' value='"+JSON.stringify(copyPersons)+"'>");
                var sindex=layer.load(2, {shade: [0.5,'#000']});
                window.removeEventListener("beforeunload",deleteprocess);
                return true; // 返回 true 表示继续提交表单，返回 false 表示取消提交
            });
        });
    </script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>入职申请</legend>
</fieldset>
<div>
<form class="layui-form" action="/process/entryadd" enctype="multipart/form-data" method="post" id="entryForm">
    <div style="display: none"><input type="text"name="id"id="formid" th:value="${id}"></div>
      <div class="layui-col-xs1"style="text-align: center;height: 38px;font-size: 16px;line-height: 38px">
        <div>申请人</div>
      </div>
      <div class="layui-col-xs5 headfont">
          <input th:value="${userDetails.realName}" name="realName" type="text" class="layui-input" readonly="readonly" >
      </div>
      <div class="layui-col-xs1" style="text-align: center;height: 38px;font-size: 16px;line-height: 38px">
        <div>入职员工姓名</div>
      </div>
    <div class="layui-col-xs5">
        <input type="text" class="layui-input"name="employeeName"id="employeeName"lay-verify="required"   autocomplete="off"  lay-affix="clear">
    </div>
    <div class="layui-col-xs12"style="text-align: center;height: 10px;">
    </div>
    <div class="layui-col-xs1" style="text-align: center;height: 38px;font-size: 16px;line-height: 38px">
        <div>用人部门</div>
    </div>
    <div class="layui-col-xs5">
        <select id="department" name="department"lay-verify="required" >
            <option value=""></option>
        </select>
    </div>
    <div class="layui-col-xs1" style="text-align: center;height: 38px;font-size: 16px;line-height: 38px">
        <div>职位</div>
    </div>
    <div class="layui-col-xs5">
        <select id="position" name="position"lay-verify="required" >
            <option value=""></option>
        </select>
    </div>
    <div class="layui-col-xs12"style="text-align: center;height: 10px;">
    </div>
    <div class="layui-col-xs1"  style="text-align: center;height: 38px;font-size: 16px;line-height: 38px">
        <div>手机号</div>
    </div>
    <div class="layui-col-xs5">
        <input type="text" class="layui-input"name="phone"id="phone"lay-verify="required||phone"  autocomplete="off"  lay-affix="clear">
    </div>
    <div class="layui-col-xs1" style="text-align: center;height: 38px;font-size: 16px;line-height: 38px">
        <div>员工类型</div>
    </div>
    <div class="layui-col-xs5">
        <select name="type" lay-verify="required">
            <option value="">请选择</option>
            <option value="实习员工">实习员工</option>
            <option value="试用员工">试用员工</option>
            <option value="正式员工">正式员工</option>

        </select>
    </div>
    <div class="layui-col-xs12"style="text-align: center;height: 10px;">
    </div>
    <div class="layui-col-xs1" style="text-align: center;height: 38px;font-size: 16px;line-height: 38px">
        <div>预计入职日期</div>
    </div>
    <div class="layui-col-xs5">
        <input type="text" class="layui-input"name="estimatedDate"lay-verify="required"id="estimatedDate" autocomplete="off">
    </div>
      <div class="layui-col-xs1" style="text-align: center;height: 38px;font-size: 16px;line-height: 38px;">
          <div >审核人</div>
      </div>
      <div class="layui-col-xs5">
          <select id="auditingperson" name="auditingPerson" lay-verify="required">
              <option value=""></option>
              <option th:each="BaseUser : ${lb}"th:value="${BaseUser.username}" th:text="${BaseUser.realName}"></option>
          </select>
      </div>
        <div class="layui-col-xs12"style="text-align: center;height: 10px;">
        </div>
    <div class="layui-col-xs1" style="text-align: center;height: 38px;font-size: 16px;line-height: 38px">
        <div>身份证</div>
    </div>
    <div class="layui-col-xs5">
        <input type="text" class="layui-input"name="idCard"lay-verify="required"id="idCard"  autocomplete="off"  lay-affix="clear">
    </div>
    <div class="layui-col-xs12">
        <p>抄送给</p>
        <div id="copyPersonSelect" class="xm-select-demo"></div>
    </div>
        <div class="layui-col-xs12"style="text-align: center;height: 10px;">
        </div>
        <div class="layui-col-xs6"style="height: 200px;">
            <div style="display: flex;margin-left: 100px;margin-top: 150px">
                <button class="layui-btn"lay-submit lay-filter="submitForm">保存</button>
                <!--                <button class="layui-btn" id="reset">取消</button>-->
            </div>
        </div>
</form>
</div>

</body>
</html>